<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaFX + JS 交互</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>body{margin:0;background:#111;}canvas{background:#fff;}</style>
</head>
<body>
<canvas id="myChart" width="600" height="300"></canvas>

<script>
    const ctx = document.getElementById('myChart');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['0','1','2','3','4','5','6','7','8','9'],
            datasets: [{
                label: '随机值',
                data: [0,0,0,0,0,0,0,0,0,0],
                borderColor: '#00aced',
                tension: 0.3
            }]
        },
        options: {
            onClick: (event, elements) => {
                if (elements.length > 0) {
                    const index = elements[0].index;
                    java.onChartClick(index);   // 调 Java！
                }
            }
        }
    });

    // 供 Java 调用的函数
    function updateData(newValue) {
        chart.data.datasets[0].data.shift();
        chart.data.datasets[0].data.push(newValue);
        chart.update();
    }
</script>
</body>
</html>